// 大版心
.wrap {
   width: 92%;
   max-width: 1780px;
   margin: 0 auto;
}

// 顶部导航
.top-nav {
   height: 25px;
   line-height: 25px;
   background-color: #111;

   .navlist {
      text-align: right;

      a {
         color: #b7b7b7;
         padding: 0 15px;

         .icon-xialajiantouxiao,
         .icon-yuyan {
            font-size: 12px;
         }
      }
   }
}

// 头部
.header-height {
   height: 80px;
   display: flex;
   // 两端对齐
   justify-content: space-between;
   // 侧轴对齐
   align-items: center;

   // 设置logo图片大小
   .logo {
      width: 140px;
   }

   // 头部导航
   nav {
      a {
         padding: 0 25px;
         // 让字体过渡
         transition: 1s;
      }
   }

   // 其它部分
   .more {
      a {
         padding: 0 15px;

         .icon-xialajiantouxiao {
            font-size: 12px;
         }
      }
   }
}

// pc端图标显示隐藏(公共样式)
.pc-hide {
   display: none;
}

// 广告图部分
.banner {
   // 当缩小屏幕会留白用最大宽度
   max-width: 1920px;
   margin: 0 auto;

   img {
      // 解决图片溢出用百分比布局
      width: 100%;
      // 解决图片留白
      vertical-align: top;
   }
}

// 小版心
.miniwrap {
   // 解决版心溢出用百分比布局 (1440/1920)
   width: 75%;
   max-width: 1440px;
   margin: 0 auto;
}

// 标题部分(公共样式)
.common-title {
   text-align: center;
   padding: 70px 0;
   font-size: 30px;

   // &  表示当前所在的选择器
   // 伪元素下划线
   &::after {
      content: '';
      display: block;
      width: 40px;
      height: 3px;
      background-color: #d24447;
      // 让伪元素上下距离盒子5px,水平居中
      margin: 5px auto;
   }
}

// 伪元素下划线
// .common-title::after {
//    content: '';
//    display: block;
//    width: 40px;
//    height: 3px;
//    background-color: #d24447;
//    让伪元素上下距离盒子5px,水平居中
//    margin: 5px auto;
// }
// 推荐信息
.recommand {

   // 内容
   .content {
      li {
         // 使用浮动
         float: left;
         position: relative;
         // 让每个li盒子都有右，下边距
         margin-right: 30px;
         margin-bottom: 30px;
         // 让图片2D转换放大隐藏
         overflow: hidden;

         img {
            // 让图片撑满li盒子
            width: 100%;
            height: 100%;
            // 解决图片底部留白
            vertical-align: top;
            //动画效果
            //移入图片需要过渡
            transition: .5s;
         }

         // 文字用定位
         .txt {
            position: absolute;
            bottom: 30px;
            left: 30px;
            color: #fff;
            line-height: 30px;
            font-size: 16px;
            // 改变文字定位层级
            z-index: 2;
            // 让文字进行2D转换平移效果,往下移动隐藏最后一排文字
            transform: translateY(55px);
            // 移入文字进行过渡效果
            transition: 1s;

            h3 {
               font-size: 20px;
            }

            span {
               color: #b9030c;
            }
         }

         // 使用伪元素实现遮罩
         a::after {
            content: '';
            // 继承父级li元素的宽高
            width: 100%;
            height: 100%;
            // 默认伪元素会在以标准文档流往下显示,使用定位让它脱标
            position: absolute;
            // 设置背景渐变从上往下
            background-image: linear-gradient(to bottom, rgba(0, 0, 0, .2), rgba(0, 0, 0, .5));
            // 改变元素定位层级
            z-index: 1;
            left: 0;
            top: 0;
            // 隐藏遮罩层
            opacity: 0;
            // 让遮罩层产生过渡效果
            transition: .5s;
         }
      }

      //动画效果
      li:hover {
         img {
            //移入图片需要放大   ==> scale(1) - scale(1.05)
            transform: scale(1.05);
         }
      }

      li:hover {
         a::after {
            //移入显示遮罩层     ==> opacity：0 - opacity:1
            opacity: 1;
         }
      }

      li:hover {
         .txt {
            //移入文字从下往上移动,让最后一排文字显示  ==> translateY
            transform: translateY(0);
         }
      }

      // 使用伪类选择器单独设置li的宽度
      li:nth-of-type(1) {
         // 动态计算出宽度(函数运算符)
         // 67%(大图片占位)(大图片宽度:950px加上图片之间间距的一半:15px)除以版心宽度:1440px为67%
         // 间距为30px,(30/2=15)
         // 67%-15px是每个大图片的占位
         width: calc(67% - 15px);
      }

      li:nth-of-type(2) {
         width: calc(33% - 15px);
         // 清除右边li盒子右外边距
         margin-right: 0;
      }

      li:nth-of-type(3) {
         width: calc(33% - 15px);
      }

      li:nth-of-type(4) {
         width: calc(67% - 15px);
         margin-right: 0;
      }

      // 33.33%(让每个图片小盒子占位一致)(图片小盒子宽度:460px加上图片之间间距的一半:20px)除以版心宽度:1440px为33.33%
      // 间距为60px,(60/3=20)
      // 33.33%-20px是每个图片小盒子的占位
      li:nth-of-type(5) {
         width: calc(33.33% - 20px);
      }

      li:nth-of-type(6) {
         width: calc(33.33% - 20px);
      }

      li:nth-of-type(7) {
         width: calc(33.33% - 20px);
         margin-right: 0;
      }
   }
}

// 底部广告图
// 注意 前面也有banner样式会 复用。
//      同名是覆盖相同的样式，不同的就是增加
.banner {
   position: relative;

   .more {
      width: 180px;
      height: 45px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 45px;
      position: absolute;
      // 使用百分比让他随屏幕自动缩放
      left: 16%;
      bottom: 12%;
      color: #fff;

      // 鼠标移入样式  &  代表.more
      &:hover {
         background-color: #c7000b;
         border-color: #c7000b;
      }
   }
}

// 新闻与活动
.news {
   text-align: center;
   padding-bottom: 70px;

   // 标题与推荐信息标题复用
   .common-title {
      &::after {
         width: 54px;
      }
   }

   // 新闻布局
   .news-list {
      // 弹性布局
      display: flex;
      // 子元素主轴两端对齐
      justify-content: space-between;

      li {
         // 使用函数运算符与上面推荐信息一样的布局
         width: calc(33.33% - 20px);
         position: relative;
         background-color: #f8f8f8;

         // 使用伪元素显示(展会活动)
         &::after {
            content: '展会活动';
            // 使用定位
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            text-align: center;
            // 使用内边距形成宽度
            padding: 0 15px;
            // 用行高让文字垂直居中
            line-height: 30px;
         }

         // 最后一个li盒子的after伪元素内容改变
         &:last-of-type::after {
            content: '新闻';
         }
      }

      .imgbox {
         // 图片放大溢出隐藏
         overflow: hidden;

         img {
            // 让图片宽度继承父盒子
            width: 100%;
            // 移入图片产生过渡效果
            transition: .5s;
         }
      }

      // 移入图片2D放大动画
      li:hover {
         img {
            transform: scale(1.05);
         }
      }

      .txtbox {
         // 用内边距撑大盒子形成宽度
         padding: 30px 20px;

         h3 {
            // 用行高产生文字之间的间距
            line-height: 40px;
         }

         .date {
            line-height: 30px;
         }
      }

   }

   // 右边滚动新闻盒子
   .scroll {
      // 要给高度才有滚动条
      height: 360px;
      padding: 30px 20px;
      // 文字溢出显示滚动条
      overflow: auto;

      a {
         // 文字与文字之间的下间距
         margin-bottom: 20px;
         // 把a转成块
         display: block;

         &:hover {
            color: #c7000b;
         }
      }
   }

   .bottom-title {
      display: inline-block;
      margin-top: 50px;

      a {
         display: inline-block;
         text-align: center;
         height: 40px;
         border: 1px solid #111;
         line-height: 40px;
         color: #111;
         min-width: 140px;
         margin: 0 10px;
         font-weight: bold;

         &:hover {
            border-color: #c7000b;
            background-color: #c7000b;
         }
      }
   }
}

// 底部列表
footer {
   padding: 40px 0;
   background-color: #f2f2f2;

   .top {
      border-bottom: 1px solid #eaeaea;
      display: flex;
      height: 30px;
      line-height: 30px;
      justify-content: space-between;
   }

   .center {
      padding: 30px 0;
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;

      dt {
         font-weight: bold;
         line-height: 30px;
      }

      dd {
         line-height: 25px;

         a {
            display: block;

            &:hover {
               color: orangered;
            }
         }
      }
   }

   .bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 35px;

      a {
         padding: 0 10px;
      }

      .icon-linkedin {
         font-size: 14px;
      }

      .icon-zhihu-square-fill {
         font-size: 18px;
      }
   }
}

// 底部导航
.nav-bottom {
   background-color: #e6e6e6;
   padding: 20px 0 10px;
   text-align: center;

   span {
      padding: 0 15px;
   }
}